<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>前端校验DEMO</title>
<!--全局样式表 magic global style-->
<link rel="stylesheet" href="http://kxt.koubei.com/product/magic/v1/css/magic.css">
<!--
项目样式表，即对应某一个运营后台的样式表 project style
<link rel="stylesheet" href="../css/work-example.css">
-->
</head>
<body>
<div id="wrap">
  <form id="validate">
    <h2 class="title">前端校验DEMO</h2>
    <div class="prompt prompt-success">
    		<h3>添加成功！</h3>
        <p>可以增加一些运营推送，比如如何可以更好的运用公告功能啊，之类的。（这些东西最好早点确认，放运营推送就会影响视觉、前端）</p>
    </div>
    <table>
      <tbody>
        <tr>
          <th><abbr title="必填项" class="require">*</abbr><label for="email">email：</label></th>
          <td><input type="text" class="text s-size" name="email" id="email"><p class="validate-error">后端校验错误</p></td>
        </tr>
        <tr>
          <th><label for="email2">email：</label></th>
          <td><input type="text" class="text s-size" name="email2" id="email2"></td>
        </tr>
        <tr>
          <th><abbr title="必填项" class="require">*</abbr><label for="cnphone">cnphone：</label></th>
          <td><input type="text" class="text s-size" name="cnphone" id="cnphone"></td>
        </tr>
        <tr>
          <th><abbr title="必填项" class="require">*</abbr><label for="cnmobile">cnmobile：</label></th>
          <td><input type="text" class="text s-size" name="cnmobile" id="cnmobile"></td>
        </tr>
        <tr>
          <th><abbr title="必填项" class="require">*</abbr><label for="date">date：</label></th>
          <td><input type="text" class="text s-size" name="date" id="date"></td>
        </tr>
        <tr>
          <th><abbr title="必填项" class="require">*</abbr><label for="number">number：</label></th>
          <td><input type="text" class="text s-size" name="number" id="number"></td>
        </tr>
        <tr>
          <th><abbr title="必填项" class="require">*</abbr><label for="sixnumber">自定义正则（6个数字）：</label></th>
          <td><input type="text" class="text s-size" name="sixnumber" id="sixnumber"></td>
        </tr>
        <tr>
          <th><abbr title="必填项" class="require">*</abbr><label>自定义校验函数（选择2项以上）：</label></th>
          <td><input type="checkbox" name="three" value="1">1 <input type="checkbox" name="three" value="2">2 <input type="checkbox" name="three" value="3">3</td>
        </tr>
        <tr>
          <th></th>
          <td>
          	<input type="submit" value="保存" class="btn">
            <button id="back" class="auto-close">关闭</button></td>
        </tr>
      </tbody>
    </table>
  </form>
</div>
<!--
do.js: http://kejun.github.com/Do/
全局脚本 global script
-->
<script charset="utf-8" src="../js/jquery-1.5.js"></script>
<script charset="utf-8" src="../js/auto.js"></script>
<!--
项目脚本，即对应某一个运营后台的脚本 project script
<script charset="utf-8" src="../js/work-example.js"></script>
-->
<script>
$(document).ready(function(){
		$("#validate").validate({
				"email" : {
						"regexp" : "email",
						"require" : true,
						"message" : "错啦"
				},
				"email2" : {
						"regexp" : "email",
						"require" : false,
						"message" : "错啦"
				},
				"cnphone" : {
						"regexp" : "cnphone",
						"require" : true,
						"message" : "错啦"
				},
				"cnmobile" : {
						"regexp" : "cnmobile",
						"require" : true,
						"message" : "错啦"
				},
				"date" : {
						"regexp" : "date",
						"require" : true,
						"message" : "错啦"
				},
				"number" : {
						"regexp" : "number",
						"require" : true,
						"message" : "错啦"
				},
				//自定义正则表达式
				"sixnumber" : {
						"regexp" : /^\d{6}$/,
						"require" : true,
						"message" : "错啦"
				},
				//自定义校验 nodes为jQuery的节点数组$("#validate").find("[name='custom']")
				"three" : {
						"custom" : function(nodes){
								var num = 0;
								nodes.each(function(index,node){
										if(node.checked){
												num++;
										}
								});
								if(num >= 2){
										return true;
								}
								return false;
						},
						"message" : "错啦"
				}
		});
});
</script>
</body>
</html>